<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)"><view slot="navbar-center">加载更多</view></w-navbar>
		<pageDemoBlock title="基本用法" color="#1c87e4">
			<view class="m-b-2">
				<w-loadMore :loadingStatus="loadingStatus" @click="loadMoreClick"></w-loadMore>
			</view>
		</pageDemoBlock>
		<pageDemoBlock title="自定义文字/颜色" color="#e4c188">
			<view class="m-b-2">
				<w-loadMore :loadingStatus="loadingStatus" loadingColor="#00AAFF" :loadingtext="loadingtext" @click="loadMoreClick"></w-loadMore>
			</view>
			<w-button type="primary" @click="loadMoreChange">状态切换</w-button>
		</pageDemoBlock>
	</view>
</template>

<script>
import pageDemoBlock from '@/components/page-demo-block';
export default {
	components: {
		pageDemoBlock
	},
	data() {
		return {
			loadingStatus: 'beforeLoading',
			loadingtext:{
				beforeLoadingText:'加载前(自定义)',
				afterLoadingText:'加载后(自定义)',
				
			}
		};
	},
	methods: {
		loadMoreChange() {
			switch (this.loadingStatus) {
				case 'beforeLoading':
					this.loadingStatus = 'loading';
					break;
				case 'loading':
					this.loadingStatus = 'afterLoading';
					break;
				case 'afterLoading':
					this.loadingStatus = 'beforeLoading';
					break;
			}
		},
		loadMoreClick(e){
			console.log(e)
		}
	}
};
</script>
<style lang="scss"></style>
